<template>
    <div>
        <el-button @click="openDialog">添加</el-button>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="name"
                label="歌名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="singer"
                label="歌手"
                width="180">
            </el-table-column>
            <el-table-column
                prop="pic"
                label="图片">
                <template slot-scope="scope">
                    <img width="50" height="50" :src="'http://localhost:7001/'+scope.row.pic" alt="">
                </template>
            </el-table-column>
            <el-table-column
                prop="isup"
                label="是否上架">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.isup == 1?'是' :'否'}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>
                    <el-popconfirm
                        title="这是一段内容确定删除吗？"
                        @confirm="del(scope.row.id)"
                    >
                        <el-button
                        slot="reference"
                        type="danger"
                        size="small">
                        删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 1.添加事件   2.改变页码   3.去请求当前页的数据 -->

        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="changePage"
            >
        </el-pagination>

        
        <el-dialog title="添加歌曲" :visible.sync="dialogFormVisible" @close="close">
            <el-form :model="music">
                <el-form-item label="歌曲名">
                    <el-input v-model="music.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="歌手">
                    <el-input v-model="music.singer" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                        action="#"
                        list-type="picture-card"
                        :http-request="uploadImage"
                        :file-list="fileList"
                        :limit="1">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                            </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="是否上架">
                    <el-checkbox  v-model="music.isup"></el-checkbox >
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="cur">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import slotCom from '@/components/slotCom.vue';
import Com from '@/components/com.vue';
export default {
    data() {
        return {
          tableData: [],
          dialogFormVisible:false,   //控制弹窗显示隐藏
          music:{
              name:'',
              singer:'',
              isup:true,  //上架
              pic:''        //地址

          },
          id:-1,
          fileList:[],    //上传图片
          pagenum:1,      //当前页码
          limit:5,        //每页的条数
          total:0         //总条数
        }
    },
    created(){
        this.getData();
    },
    methods:{

        getData(){
            this.$http.get('/api/querymusic',{params:{pagenum:this.pagenum,limit:this.limit}}).then(res => {
                console.log(res)
                if(res.data.code === 1){
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            })
        },
        openDialog(){
            this.dialogFormVisible = true;
        },
        //上传
        uploadImage(e){
            console.log(e.file);
            //formdata
            let formdata = new FormData();
            formdata.append("file",e.file);
            this.$http.post('/api/upload',formdata,{headers:{'Content-Type':'multipart/form-data'}}).then(res => {
                this.music.pic = res.data.url;
            })
        },
        //确定
        cur(){
            let url = '';
            let params = {};
            //添加  修改  id
            if(this.id != -1){
                //修改
                url = '/api/updatemusic';
                params = {...this.music,id:this.id}
            }else{
                //添加
                url = '/api/addmusic';
                params = this.music;
            }

            this.$http.post(url,params).then(res => {
                console.log(res);
                if(res.data.code === 1){
                    //歌曲成功
                    this.dialogFormVisible = false;
                    this.getData();
                    this.resetData();
                }
            })
        },
        //修改
        edit(curData){
            this.dialogFormVisible = true;
            this.id = curData.id;
            this.music.pic = curData.pic;
            this.music.isup = curData.isup == 1 ? true : false;
            this.music.name = curData.name;
            this.music.singer = curData.singer;
            this.fileList.push({
                url:'http://localhost:7001/'+curData.pic
            })
        },

        //初始化弹窗数据
        resetData(){
            //重置表单数据
            this.music = {
                pic:'',
                isup:true,
                name:'',
                singer:''
            }
            this.id = -1;
        },
        //关闭弹窗
        close(){
            console.log("===")
            this.dialogFormVisible = false;
            this.fileList.splice(0);
            this.resetData();
        },

        //改变页码
        changePage(val){
            this.pagenum = val;
            this.getData();
        },

        //删除
        del(id){
            console.log(id)
            this.$http.delete('/api/deletemusic',{params:{id}}).then(res => {
                if(res.data.code === 1){
                    this.getData();
                }
            })
        }
    }
}
</script>

